webpackJsonp([220],{

/***/ 1762:
/***/ (function(module, exports) {

module.exports = {
  "content": [
    "section",
    [
      "p",
      "Small numerical value or status descriptor for UI elements."
    ],
    [
      "h2",
      "When To Use"
    ],
    [
      "p",
      "Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count."
    ]
  ],
  "meta": {
    "category": "Components",
    "type": "Data Display",
    "title": "Badge",
    "filename": "components/badge/index.en-US.md"
  },
  "toc": [
    "ul",
    [
      "li",
      [
        "a",
        {
          "className": "bisheng-toc-h2",
          "href": "#When-To-Use",
          "title": "When To Use"
        },
        "When To Use"
      ]
    ],
    [
      "li",
      [
        "a",
        {
          "className": "bisheng-toc-h2",
          "href": "#API",
          "title": "API"
        },
        "API"
      ]
    ]
  ],
  "api": [
    "section",
    [
      "h2",
      "API"
    ],
    [
      "pre",
      {
        "lang": "jsx",
        "highlighted": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>Badge</span> <span class=\"token attr-name\">count</span><span class=\"token script language-javascript\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token number\">5</span><span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>#<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">className</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>head-example<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>Badge</span><span class=\"token punctuation\">></span></span>"
      },
      [
        "code",
        "<Badge count={5}>\n  <a href=\"#\" className=\"head-example\" />\n</Badge>"
      ]
    ],
    [
      "pre",
      {
        "lang": "jsx",
        "highlighted": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>Badge</span> <span class=\"token attr-name\">count</span><span class=\"token script language-javascript\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token number\">5</span><span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span>"
      },
      [
        "code",
        "<Badge count={5} />"
      ]
    ],
    [
      "table",
      [
        "thead",
        [
          "tr",
          [
            "th",
            "Property"
          ],
          [
            "th",
            "Description"
          ],
          [
            "th",
            "Type"
          ],
          [
            "th",
            "Default"
          ]
        ]
      ],
      [
        "tbody",
        [
          "tr",
          [
            "td",
            "count"
          ],
          [
            "td",
            "Number to show in badge"
          ],
          [
            "td",
            "number",
            "|",
            "ReactNode"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "dot"
          ],
          [
            "td",
            "Whether to display a red dot instead of ",
            [
              "code",
              "count"
            ]
          ],
          [
            "td",
            "boolean"
          ],
          [
            "td",
            [
              "code",
              "false"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "offset"
          ],
          [
            "td",
            "set offset of the badge dot, like",
            [
              "code",
              "[x, y]"
            ]
          ],
          [
            "td",
            [
              "code",
              "[number, number]"
            ]
          ],
          [
            "td",
            "-"
          ]
        ],
        [
          "tr",
          [
            "td",
            "overflowCount"
          ],
          [
            "td",
            "Max count to show"
          ],
          [
            "td",
            "number"
          ],
          [
            "td",
            "99"
          ]
        ],
        [
          "tr",
          [
            "td",
            "showZero"
          ],
          [
            "td",
            "Whether to show badge when ",
            [
              "code",
              "count"
            ],
            " is zero"
          ],
          [
            "td",
            "boolean"
          ],
          [
            "td",
            [
              "code",
              "false"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "status"
          ],
          [
            "td",
            "Set Badge as a status dot"
          ],
          [
            "td",
            [
              "code",
              "success"
            ],
            " ",
            "|",
            " ",
            [
              "code",
              "processing"
            ],
            " ",
            "|",
            " ",
            [
              "code",
              "default"
            ],
            " ",
            "|",
            " ",
            [
              "code",
              "error"
            ],
            " ",
            "|",
            " ",
            [
              "code",
              "warning"
            ]
          ],
          [
            "td",
            [
              "code",
              "''"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "text"
          ],
          [
            "td",
            "If ",
            [
              "code",
              "status"
            ],
            " is set, ",
            [
              "code",
              "text"
            ],
            " sets the display text of the status ",
            [
              "code",
              "dot"
            ]
          ],
          [
            "td",
            "string"
          ],
          [
            "td",
            [
              "code",
              "''"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "title"
          ],
          [
            "td",
            "Text to show when hovering over the badge"
          ],
          [
            "td",
            "string"
          ],
          [
            "td",
            [
              "code",
              "count"
            ]
          ]
        ]
      ]
    ]
  ]
};

/***/ })

});